﻿@using JabbR
@using SquishIt.Framework;
@model SettingsViewModel

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>JabbR</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="A real-time chat application." />
    <meta name="keywords" content="chat,realtime chat,signalr,jabbr" />
    <link href="@Url.Content("~/Content/images/logo32.png")" rel="icon" type="image/png" sizes="32x32">
    <link href="@Url.Content("~/Content/images/logo64.png")" rel="icon" type="image/png" sizes="64x64">
    <link href="@Url.Content("~/favicon.ico")" rel="shortcut icon" type="image/x-icon" sizes="16x16">
    @{ 
        WriteLiteral(Bundle.Css().ForceDebugIf(() => Model.DebugMode)
            .Add("~/Content/bootstrap.min.css")
            .Add("~/Content/bootstrap-responsive.min.css")
            .Add("~/Content/font-awesome.min.css")
            .Add("~/Content/themes/default/Chat.css")
            .Add("~/Content/themes/default/Chat.nuget.css")
            .Add("~/Content/themes/default/Chat.bbcnews.css")
            .Add("~/Content/themes/default/Chat.githubissues.css")
            .Add("~/Content/themes/default/Chat.dictionary.css")
            .Add("~/Content/KeyTips.css")
            .Add("~/Content/emoji20.css")
            .Render("~/Content/JabbR_#.css"));
   }

    @if (!String.IsNullOrEmpty(Model.GoogleAnalytics))
    {
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', '@Model.GoogleAnalytics']);
        _gaq.push(['_trackPageview']);

        (function () {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
    }
    <script id="new-message-template" type="text/x-jquery-tmpl">
        <li class="message ${highlight} clearfix{{if isMine}} my-message{{/if}}{{if showUser}} first{{/if}}" id="m-${id}" data-name="${name}" data-timestamp="${date}">
            <div class="left">
                {{if showUser}}
                <div class="user ${status} ${presence}">
                    <div class="user-status-container">
                        <i class="user-status"></i>
                    </div>
                    <img src="https://secure.gravatar.com/avatar/${hash}?s=16&d=mm" class="gravatar" />
                    <div class="name">${name}</div>
                </div>
                {{/if}}
                <span class="state"></span>
            </div>
            <div class="middle{{if showUser}} first{{/if}}">
                {{html message}}
            </div>
            <div class="right{{if showUser}} first{{/if}}">
                <span id="t-${id}" class="time" title="${fulldate}">${when}</span>
            </div>
        </li>
    </script>
    <script id="new-notification-template" type="text/x-jquery-tmpl">
        <li class="${type}" data-timestamp="${date}"{{if id}} id="m-${id}"{{/if}}>
            <div class="content">
                {{if img}}
                <img src="${img}" />
                {{/if}}
                {{if source}}
                <strong>${source}:</strong>
                {{/if}}
                {{html message}}
                <a class="info" href="#"></a>
            </div>
            <div class="right">
                <span class="time" title="${fulldate}">${when}</span>
            </div>
        </li>
    </script>
    <script id="message-separator-template" type="text/x-jquery-tmpl">
        <li class="message-separator">
        </li>
    </script>
    <script id="multiline-content-template" type="text/x-jquery-tmpl">
        <div class="collapsible_content">
            <h3 class="collapsible_title">@LanguageResources.Content_PasteHeaderAndToggle</h3>
            <div class="collapsible_box">
                <pre class="multiline">${content}</pre>
            </div>
        </div>
    </script>
    <script id="new-lobby-room-template" type="text/x-jquery-tmpl">
        <li class="room {{if Private}}locked{{/if}} {{if Closed}}closed{{/if}}" data-room="${Name}" data-name="${Name}" data-count="${Count}">
            <div class="row-fluid room-row">
                <div class="span3">
                    <span class="name">${Name}</span>
                    <span class="lock"><i class="icon-lock"></i></span>
                    <span class="readonly"><i class="icon-ban-circle"></i></span>
                </div>
                <div class="span4">
                    <span class="topic">${Topic}</span>
                </div>
                <div class="span2">
                    <span class="count">
                        {{if Count == 0}}
                        @LanguageResources.Client_OccupantsZero
                        {{else Count == 1}}
                        @LanguageResources.Client_OccupantsOne
                        {{else}}
                        @String.Format(LanguageResources.Client_OccupantsMany, "${Count}")
                        {{/if}}
                    </span>
                </div>
            </div>
        </li>
    </script>
    <script id="new-user-template" type="text/x-jquery-tmpl">
        <li class="user" data-name="${name}">
            <div class="user-status-container">
                <i class="user-status"></i>
            </div>
            <img class="gravatar" src="https://secure.gravatar.com/avatar/${hash}?s=16&d=mm" />
            <div class="details {{if admin}}admin{{/if}}">
                <div class="flag-container">
                    <div class="flag{{if flagClass}} ${flagClass}{{/if}}" {{if flag}}title="${country}"{{/if}}></div>
                </div>
                <div class="name-container">
                    <div class="name" {{if note}}title="${note}"{{else}}title="${name}"{{/if}}>${name}</div>
                    <div class="inactive-since"></div>
                    {{if admin}}<div class="admin">(@LanguageResources.Client_AdminTag)</div>{{/if}}
                </div>
                <div style="clear:both"></div>
            </div>
            <div style="clear:both"></div>
        </li>
    </script>
    <script id="new-userlist-template" type="text/x-jquery-tmpl">
        <h3 class="userlist-header nav-header">
            <span class="list-name">${listname}</span>
        </h3>
        <div>
            <ul id="${id}" data-empty-message="@LanguageResources.Client_NoUsersInList" />
        </div>
    </script>
    <script id="new-tab-template" type="text/x-jquery-tmpl">
        <li id="tabs-${id}" class="room" data-name="${name}" data-closed="${closed}" data-trimmable="true" role="tab">
            <a> 
                <i class="icon-lock lock hide"></i>
                <i class="icon-ban-circle readonly hide"></i>
                <span class="content">${name}</span>
                <button class="close">&times;</button>
            </a>
        </li>
    </script>
    <script id="command-help-template" type="text/x-jquery-tmpl">
        <dt>
            <span class="command command-name">{{if IsKeyCombination}}{{else}}/{{/if}}${Name}</span> 
            {{if Arguments}}<span class="command command-args">${Arguments}</span>{{/if}}
        </dt>
        <dd>${Description}</dd>
    </script>
    <!-- TweetContentProvider: Should be extracted out if other content providers need templates -->
    <script id="tweet-template" type="text/x-jquery-tmpl">
        <div class="collapsible_content">
            {{html html}}
        </div>
        <time class="js-relative-date" datetime="${created_at}">${created_at}</time> 
    </script>
    <!-- /TweetContentProvider -->
    <!-- /GitHub Issues Content Provider -->
    <script id="github-issues-template" type="text/x-jquery-tmpl">
        <div class="new-comments">
            <div class="avatar-bubble js-comment-container">
                <span class="avatar">
                    <img height="48" width="48" src="${user.avatar_url}">
                    <span class="overlay size-48"></span>
                </span>
                <div class="bubble">
                    <div class="comment starting-comment ">
                        <div class="body">
                            <p class="author">
                                @Html.Raw(String.Format(LanguageResources.GithubContent_UserOpenedIssueAtTime, "${user.login}", "${created_at}"))
                            </p>
                            <a href="${html_url}" target="_blank"><h2 class="content-title">${title}</h2></a>
                            <div class="infobar clearfix">
                                <p class="milestone js-milestone-infobar-item-wrapper">@LanguageResources.GithubContent_NoMilestone</p>
                                {{if assignee}}
                                    <p class="assignee">
                                        <span class="avatar">
                                            <img height="20" width="20" src="${assignee.avatar_url}">
                                            <span class="overlay size-20"></span>
                                        </span>
                                        @Html.Raw(String.Format(LanguageResources.GithubContent_UserAssigned, "${assignee.login}"))
                                    </p>
                                {{/if}}
                            </div>
                            <div class="formatted-content">
                                <div class="content-body wikistyle markdown-format">
                                    <p>
                                        {{html body}}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <!-- /Github Issus Content Provider -->
    <!-- /GitHub Issues Comment Content Provider -->
    <script id="github-issues-comment-template" type="text/x-jquery-tmpl">
        <div class="new-comments">
            <div class="avatar-bubble js-comment-container">
                <span class="avatar">
                    <img height="48" width="48" src="${user.avatar_url}">
                    <span class="overlay size-48"></span>
                </span>
                <div class="bubble">
                    <div class="comment starting-comment ">
                        <div class="body">
                            <p class="author">
                                @Html.Raw(String.Format(LanguageResources.GithubContent_UserCommentedAtTime, "${user.login}", "${created_at}"))
                            </p>
                            <a href="${html_url}" target="_blank"><h2 class="content-title">${title}</h2></a>
                            <div class="formatted-content">
                                <div class="content-body wikistyle markdown-format">
                                    <p>
                                        {{html body}}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <!-- /Github Issus Comment Content Provider -->
    <!--Gravatar Profile Template for Who command-->
    <script id="gravatar-profile-template" type="text/x-jquery-tmpl">
        <div class="collapsible_content">
            <h3 class="collapsible_title">
                @Html.Raw(String.Format(Encoder.HtmlEncode(LanguageResources.GravatarContent_HeaderAndToggle), "${profileUrl}"))
            </h3>
            <div class="collapsible_box">
                <div class="gravatar_${hash} gravatarProfile">
                    <div class="user">
                        <img src="${thumbnailUrl}">
                        <span class="name">${preferredUsername}</span>{{if name.formatted}} (${name.formatted}){{/if}}
                        <p><a href="${profileUrl}" target="_blank">${profileUrl}</a></p>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <!--/Gravatar Profile Template-->
</head>
<body @if (Model.IsAdmin) { @Html.Raw("class=\"home-admin\""); }>
    <section id="page" role="application">
        <header id="heading" role="heading">
            <div class="banner" role="banner">
                <h1>JabbR</h1>
            </div>
            <nav>
                <ul id="tabs" role="tablist">
                    <li id="tabs-lobby" class="current lobby no-close" data-name="Lobby" data-trimmable="false" role="tab">
                        <a accesskey="l">
                            <span class="content">@LanguageResources.Client_Lobby</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div id="main-menu" class="pull-right">
                <div id="tabs-dropdown-container" role="tablist">
                    <button class="dropdown-toggle" data-toggle="dropdown" id="tabs-dropdown-rooms">
                        <i class="icon-chevron-down"></i>
                    </button>
                  
                    <ul id="tabs-dropdown" class="dropdown-menu pull-right" aria-labelledby="tabs-dropdown-rooms">
                    </ul>
                </div>
                <div id="connectionStatus" class="connection-status" data-toggle="popover" data-placement="bottom">
                    <i class="icon-connection-status"></i>
                <div id="connection-info-popover" class="popover"><div class="arrow"></div><div class="popover-inner"><i class="popover-title-icon icon-globe" style="display: none;"></i><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"><p></p></div></div></div>
                <div id="connection-info-content" style="display: none;"><p id="connection-status"></p><p id="connection-transport"></p></div>
                <div id="connection-state-changed-popover" class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title" style="display: none;"></h3><i id="popover-content-icon"></i><div class="popover-content"><p></p></div></div></div>
                </div>
                <div id="preferences" class="navbar account pull-right">
                    <div class="navbar-inner">
                        <ul class="nav">
                            <li><a id="notifications" class="" title="@LanguageResources.Client_Notifications" href="@Url.Content("~/notifications")" target="_blank"><i class="icon-comments"></i><span id="notification-unread-count" class="badge badge-info"></span></a></li>
                            <li><a class="" title="@LanguageResources.Client_AccountSettings" href="@Url.Content("~/account")" target="_blank"><i class="icon-user"></i></a></li>
                            @if (Model.IsAdmin)
                            {
                                <li><a class="" title="@LanguageResources.Client_JabbrSettings" href="@Url.Content("~/administration")" target="_blank"><i class="icon-cog"></i></a></li>
                            }
                            <li><a class="help" aria-haspopup="true" title="@LanguageResources.Client_DisplayHelp"><i class="icon-question-sign"></i></a></li>
                            <li><a class="logout" title="@LanguageResources.Client_SignOut"><i class="icon-signout"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <div id="topic-bar">
            <form id="room-filter-form" action="#" class="form-inline">
                <input id="room-filter" class="filter input-xlarge" type="text" placeholder="@LanguageResources.Client_RoomFilterInstruction" />
                <label id="room-filter-closed-area" class="checkbox inline">
                    <input id="room-filter-closed" type="checkbox" />
                    @LanguageResources.Client_ShowClosedRooms
                </label>
            </form>
            <div id="room-actions" class="btn-group pull-right">
                <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">@LanguageResources.Client_RoomSettings <span class="caret"></span></button>
                <ul id="room-preferences" class="dropdown-menu">
                    <li><a class="sound" title="audible notifications"><i class="icon-sound"></i> @LanguageResources.Client_AudibleNotifications</a></li>
                    <li><a class="richness" title="toggle rich-content"><i class="icon-richness"></i> @LanguageResources.Client_ToggleRichContent</a></li>
                    <li><a class="toast" title="popup notifications" aria-haspopup="true"><i class="icon-toast"></i> @LanguageResources.Client_PopupNotifications</a></li>
                    <li><a class="download" title="download messages" aria-haspopup="true"><i class="icon-download"></i> @LanguageResources.Client_DownloadMessages</a></li>
                </ul>
            </div>
        </div>
        <div id="chat-area" role="tabpanel">
            <div id="room-loading">
                <i class="icon-spinner icon-3x"> </i><h3>@LanguageResources.LoadingMessage</h3>
            </div>
            <div id="lobby-wrapper">
                <div id="lobby-private">
                    <h2 class="userlist-header nav-header">@LanguageResources.Client_YourPrivateRooms</h2>
                    <ul id="userlist-lobby-owners" data-empty-message="@LanguageResources.Client_NoMatchingRooms"></ul>
                </div>
                <div id="lobby-other">
                    <h2 class="userlist-header nav-header">@LanguageResources.Client_Rooms</h2>
                    <ul id="userlist-lobby" data-empty-message="@LanguageResources.Client_NoMatchingRooms">
                    </ul>
                    <div id="load-more-rooms-item" class="room" style="display:none;"><div class="row-fluid room-row load-more-rooms"><i class="icon-spinner" style="display:none;"></i><a href="#">@LanguageResources.Client_LoadMore</a></div></div>
                </div>
                <ul id="messages-lobby" class="messages current" role="log" style="visibility: hidden;">
                </ul>
            </div>
            <form id="send-message" action="#">
                <div id="message-box">
                    <textarea id="new-message" autocomplete="off" aria-autocomplete="none" accesskey="m"></textarea>
                </div>
                <input type="submit" id="send" value="@LanguageResources.Client_Send" class="send btn" />
            </form>
            <form id="upload" action="@Url.Content("~/upload-file")" method="post" enctype="multipart/form-data" target="upload-frame">
                <input type="hidden" id="file-connection-id" name="connectionId" />
                <input type="hidden" id="file-message-id" name="messageId" />
                <input type="hidden" id="file-room" name="room" />
                <div class="btn upload-button icon-cloud-upload icon-large">
                    <input type="file" id="hidden-file" name="data">
                </div>
            </form>
            <iframe id="upload-frame" name="upload-frame" style="position:absolute;top:0;left:0;width:0;height:0;visibility:hidden;"></iframe>
        </div>
        <audio src="Content/sounds/notification.wav" id="notificationSound" hidden="hidden" aria-hidden="true">
        </audio>
        <section aria-hidden="true" aria-haspopup="true">
            <div id="disconnect-dialog" class="modal hide fade">
                <div class="modal-header">
                  <a class="close" data-dismiss="modal">&times;</a>
                  <div class="jabbrLogo" id="logo"></div><h3>@LanguageResources.Client_JabbrError</h3>
                </div>
                <div class="modal-body">
                  <p>@LanguageResources.Client_JabbrErrorMessage</p>
                </div>
            </div>
            <div id="download-dialog" class="modal hide fade">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">&times;</a>
                    <h3>@LanguageResources.Client_DownloadMessages</h3>
                </div>
                <div class="modal-body">
                    <p>@LanguageResources.Client_DownloadMessagesDateRange</p>
                    <p>
                    <select id="download-range">
                        <option value="last-hour">@LanguageResources.Client_DateRangeLastHour</option>
                        <option value="last-day">@LanguageResources.Client_DateRangeLastDay</option>
                        <option value="last-week">@LanguageResources.Client_DateRangeLastWeek</option>
                        <option value="last-month">@LanguageResources.Client_DateRangeLastMonth</option>
                        <option value="all">@LanguageResources.Client_DateRangeAll</option>
                    </select>
                    </p>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary" id="download-dialog-button">@LanguageResources.Client_Download</a>
                </div>
            </div>
            <div id="jabbr-help" class="modal hide fade">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">&times;</a>
                    <h3>@LanguageResources.Client_Help</h3>
                </div>
                <div class="modal-body">
                    <div class="help-body">
                        @if (Model.ShowDetails)
                        {
                            <div id="releaseArea">
                                <p>
                                    @Html.Raw(String.Format(LanguageResources.Client_DeploymentInfo, 
                                                            Model.Sha, 
                                                            Model.Sha.Substring(0, 10), 
                                                            Model.Branch, 
                                                            Model.Time))
                                </p>
                            </div>
                        }
                        <div class="command-list">
                            <h3>@LanguageResources.Client_FAQ</h3>
                            @Html.Raw(LanguageResources.Client_FAQMessage)      
                        </div>
                        <h3>@LanguageResources.Client_SiteWideShortcuts</h3>
                        <dl id="shortcut" class="command-list"></dl>
                        <h3>@LanguageResources.Client_SiteWideCommands</h3>
                        <dl id="global" class="command-list"></dl>
                        <h3>@LanguageResources.Client_RoomCommands</h3>
                        <dl id="room" class="command-list"></dl>
                        <h3>@LanguageResources.Client_UserCommands</h3>
                        <dl id="user" class="command-list"></dl>
                    </div>
                </div>
            </div>
            <div id="jabbr-update" class="modal hide fade">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">&times;</a>
                    <div class="jabbrLogo" id="logo"></div><h3>@LanguageResources.Client_RefreshRequiredHeader</h3>
                </div>
                <div class="modal-body">
                    <p>@LanguageResources.Client_RefreshRequiredNotification</p>
                </div>
            </div>
            <div id="reloadMessageNotification" class="reload-message alert alert-info">
                <button type="button" class="close" data-dismiss="alert">&times;</button><a href="#">@LanguageResources.Client_LoadMissingMessages</a>
            </div>
            <div id="loadingRoomHistory" class="loading-room-history alert alert-info">
                <i class="icon-spinner icon-spin"></i> @LanguageResources.Client_LoadingPreviousMessages
            </div>
            <div id="jabbr-upload-preview" class="modal hide fade">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">&times;</a>
                    <h3>@LanguageResources.Client_UploadingFromClipboard</h3>
                </div>
                <div class="modal-body">
                    <div class="help-body">
                        <img id="image-upload-preview" />
                        <span id="unknown-upload-preview">@LanguageResources.Client_UploadNoPreview</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <a id="upload-preview-cancel" class="btn btn-secondary" href="#">@LanguageResources.Client_Cancel</a>
                    <a id="upload-preview-upload" class="btn btn-primary" href="#">@LanguageResources.Client_Upload</a>
                </div>
            </div>
        </section>
    </section>
    <div id="paste" contenteditable="true" style="height: 1px; width: 1px;"></div>
    <div id="drop-file-target"><h1 class="drop-file-text">@LanguageResources.Client_UploadDropTarget</h1></div>
    @{
        WriteLiteral(Bundle.JavaScript().ForceDebugIf(() => Model.DebugMode)
            .Add("~/Scripts/jquery-2.0.3.min.js")
            .Add("~/Scripts/jquery-migrate-1.0.0.min.js")
            .Add("~/Scripts/json2.min.js")
            .Add("~/Scripts/bootstrap.js")
            .Add("~/Scripts/jquery.color-2.1.2.min.js")
            .Add("~/Scripts/jquery.dragsort-0.5.1.min.js")
            .Add("~/Scripts/jquery.pulse.min.js")
            .Add("~/Scripts/jquery.KeyTips.js")
            .Add("~/Scripts/jquery.signalR-2.0.0-rtm1-130818-b157.min.js")
            .Render("~/Scripts/JabbR1_#.js"));
    }
    <script type="text/javascript" src="@Url.Content("~/signalr/hubs")"></script>
    <script type="text/javascript">
      window.jabbrVersion = '@Model.Version';
      window.languageResources = {
        @Html.Raw(Model.ClientLanguageResources)
      };
    </script>
    @{
        WriteLiteral(Bundle.JavaScript().ForceDebugIf(() => Model.DebugMode)
            .Add("~/Scripts/jQuery.tmpl.min.js")
            .Add("~/Scripts/jquery.cookie.js")
            .Add("~/Scripts/jquery.autotabcomplete.js")
            .Add("~/Scripts/jquery.timeago.0.10.js")
            .Add("~/Scripts/jquery.captureDocumentWrite.min.js")
            .Add("~/Scripts/jquery.sortElements.js")
            .Add("~/Scripts/ba-linkify.min.js")
            .Add("~/Scripts/quicksilver.js")
            .Add("~/Scripts/Markdown.Converter.js")
            .Add("~/Scripts/jquery.history.js")
            .Add("~/Scripts/moment.min.js")
            .Add("~/Scripts/livestamp.min.js")
            .Add("~/Chat.emoji.js")
            .Add("~/Chat.utility.js")
            .Add("~/Chat.toast.js")
            .Add("~/Chat.ui.room.js")
            .Add("~/Chat.ui.js")
            .Add("~/Chat.ui.fileUpload.js")
            .Add("~/Chat.documentOnWrite.js")
            .Add("~/Chat.twitter.js")
            .Add("~/Chat.githubissues.js")
            .Add("~/Chat.js")
            .Render("~/Scripts/JabbR2_#.js"));
    }
    @if (Model.DebugMode)
    {
    @*<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.network.mock.js")"></script>*@
    }
</body>
</html>
